import React from "react";
import { useState, useEffect } from 'react'
import { Card, Tabs } from 'antd'
import Login from './components/login'
import Register from './components/register'
import './fontStyle.less'
import { useSelector } from 'react-redux'
import { useNavigate } from 'react-router-dom'



const Index = () => {
  const navigate = useNavigate()
  const token = useSelector(store => store.userRedux.token) || localStorage.getItem('token');
  const [tabKey, $tabKey] = useState(2)
  const items = [
    {
      key: 1,
      label: '登录',
      children: <Login goRegister={() => {
        $tabKey(2)

      }} />,
    },
    {
      key: 2,
      label: '注册',
      children: <Register toLogin={() => {
        $tabKey(1)
      }} />,
    },
  ]
  useEffect(() => {
    if (token) {
      navigate('/')
    }
  }, [token])

  return (
    <div className="layout-content">
      <Card className="login-card" style={{ width: 450 }}>
        <div style={{ fontSize: '18px', fontWeight: '700', textAlign: 'center', marginBottom: '15px' }} > 后台管理系统</div>
        <Tabs centered key={tabKey} defaultActiveKey={tabKey} items={items} onChange={(key) => {
          $tabKey(key)
        }} />
      </Card>
    </div >
  )
}

export default Index
